<template>
  <div
    v-if="book"
    class="app-container"
  >
    <page-header
      title="预约信息"
      show-back
    >
      <div class="d-flex justify-content-between">
        <el-button
          v-for="(button,index) in book.handles"
          :key="index"
          :type="button.type || 'primary'"
          size="small"
          @click="onAction(button)"
        >{{ button.text }}</el-button>
        <download-button
          v-if="book.download"
          text="下载预约单"
          url="/download/book/view"
          format="docx"
          :params="{id:book.id}"
        />
      </div>
    </page-header>
    <el-card shadow="never">
      <em-descriptions
        title="基本信息"
        :column="3"
        gutter="10px 0"
        size="small"
        label-position="right"
        label-width="100px"
        label-suffix="："
      >
        <em-descriptions-item label="预约编号">
          {{ book.id }}
          <em-clipboard
            :content="book.id"
            icon="copy-layer"
            active-icon="em-icon-success-o"
          />
        </em-descriptions-item>
        <em-descriptions-item label="预约来源">
          {{ (book.site && book.site.name) || '-' }}
        </em-descriptions-item>
        <em-descriptions-item label="创建时间">
          {{ book.created_at | asDatetime }}
        </em-descriptions-item>
        <em-descriptions-item label="参观单位">
          {{ book.company_name }}
        </em-descriptions-item>
        <em-descriptions-item label="参观需求">
          <el-tag
            v-for="(category,index) in book.categorys"
            :key="index"
            size="mini"
          >{{ category.name }}</el-tag>
        </em-descriptions-item>
        <em-descriptions-item label="场地需求">
          {{ (book.room && book.room.name) || '无需座谈' }}
        </em-descriptions-item>
        <em-descriptions-item label="预约日期">
          {{ (book.date && $moment(book.date).locale('zh-CN').format('LL')) || '--' }}
        </em-descriptions-item>
        <em-descriptions-item label="预约时段">
          <el-tag
            v-for="(stage,index) in book.stages"
            :key="index"
            size="mini"
          >{{ stage.duration }}</el-tag>
        </em-descriptions-item>
        <em-descriptions-item label="预约状态">
          <el-tag
            :type="book.status.class"
            size="mini"
          >{{ book.status.label }}</el-tag>
        </em-descriptions-item>
      </em-descriptions>
      <em-descriptions
        :column="3"
        gutter="10px 0"
        size="small"
        label-position="right"
        label-width="100px"
        label-suffix="："
        title="联系信息"
      >
        <em-descriptions-item label="联系人">
          {{ book.contact }}
        </em-descriptions-item>
        <em-descriptions-item label="联系人手机号">
          <em-phone-number :value="book.contact_mobile" />
          <em-clipboard
            :content="book.contact_mobile"
            icon="copy-layer"
            active-icon="em-icon-success-o"
          />
        </em-descriptions-item>
      </em-descriptions>
      <em-descriptions
        :column="3"
        gutter="10px 0"
        size="small"
        label-position="right"
        label-width="100px"
        label-suffix="："
        title="对接信息"
      >
        <em-descriptions-item label="对接部门">
          {{ book.waiterDepartment.name }}
        </em-descriptions-item>
        <em-descriptions-item label="公司对接人">
          {{ book.waiter_name }}
        </em-descriptions-item>
      </em-descriptions>
    </el-card>
    <div class="order-container mt-4">
      <el-card
        shadow="never"
        header="参观人员名单"
      >
        <el-table
          :data="book.staffs"
          style="width: 100%"
          size="small"
        >
          <el-table-column
            label="姓名"
            prop="realname"
          />
          <el-table-column
            label="职务"
            prop="position"
          />
          <el-table-column label="手机号">
            <template slot-scope="scope">
              <em-phone-number :value="scope.row.mobile" />
              <em-clipboard
                :content="scope.row.mobile"
                icon="copy-layer"
                active-icon="em-icon-success-o"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="单位"
            prop="company_name"
          />
        </el-table>
      </el-card>
    </div>
    <!--触发的表单弹窗-->
    <el-dialog
      v-if="dialogFormVisible"
      :visible.sync="dialogFormVisible"
      :title="dialogTitle"
      append-to-body
      destroy-on-close
    >
      <el-scrollbar
        style="height:100%"
        wrap-style="overflow-x:hidden;"
      >
        <audit-form
          ref="dialogForm"
          :primary-key="book.id"
          :book="book"
          :audit-type="auditType"
          :action-visible="false"
          @submit="onRefresh"
        />
      </el-scrollbar>
      <template slot="footer">
        <el-button
          type="primary"
          @click="onAuditSubmit"
        >
          提交
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import PageHeader from '@/components/PageHeader'
import DownloadButton from '@/components/Download'
import AuditForm from './components/AuditForm'
import Formatter from '@/utils/formatter'
export default {
  name: 'OrderView',
  components: {
    PageHeader,
    DownloadButton,
    AuditForm
  },
  data() {
    return {
      formatter: new Formatter(),
      visible: false,
      activeName: 'first',
      testData: [],
      dialogFormVisible: false,
      dialogTitle: '预约审核',
      advanceSearch: false,
      order: null,
      dialogFreightVisible: false,
      dialogFormName: '',
      auditType: '',
      book: null
    }
  },
  computed: {},
  created() {
    this.onLoad()
  },
  inject: ['goBack'],
  mounted() {},
  methods: {
    arrayUnique(arr) {
      var x = new Set(arr)
      return [...x]
    },
    onLoad() {
      const id = this.$route.params.id
      this.$http.book.view(id).then(res => {
        this.book = res.data
      })
    },
    onAuditSubmit() {
      var $el = this.$refs
      if ($el.dialogForm) {
        $el.dialogForm.onSubmit()
      } else {
        console.log('refs:', $el)
      }
    },
    onRefresh() {
      this.dialogFormVisible = false
      this.onLoad()
    },
    onAction(button) {
      console.log('点击了下载按钮', button)
      if (button.name === 'delete') {
        this.$confirm(
          '请仔细核对异常交易，确认无误后再进行操作，确认操作该交易？',
          '交易操作提醒',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then(_ => {
            this.$http.book
              .delete({
                handle: button.name,
                id: this.book.id
              })
              .then(res => {
                this.goBack()
              })
          })
          .catch(_ => {})
      } else if (button.name === 'update') {
        this.$router.push({
          name: 'book/default/update/:id',
          params: {
            id: this.book.id
          }
        })
      } else if (button.name === 'audit') {
        this.dialogFormVisible = true
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.console-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  &__end {
    display: flex;
    align-items: center;
  }
}
.order-item {
  display: grid;
  gap: 10px 5%;
  grid-template-columns: repeat(auto-fill, 30%);
  dl {
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    margin: 0;
    dt {
      flex: 1;
      text-align: right;
      color: #999;
    }
    dd {
      flex: 3;
      margin: 0;
      > * + * {
        margin-left: 4px;
      }
    }
  }
}
.union-next + .union-prev {
  margin-top: 0;
}
.union-prev + .union-prev {
  margin-top: 1em;
}
</style>
